<template>
  <div class=" box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-col :span="24" class="dialog">
            <el-dialog
              title="温馨提示"
              :visible.sync="dialogVisible"
              width="30%"
            >
<!--              <i class="el-icon-full-screen icon" @click="handleFull"></i>-->
              <i class="ri-fullscreen-fill icon" @click="handleFull" v-if="isFullscreen"></i>
              <i class="ri-fullscreen-exit-fill icon" @click="handleFull" v-else></i>


              <span>昨夜西风凋碧树，独上高楼望尽天涯路</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>

            <el-button type="primary" size="medium" @click="begin()">可拖拽弹窗</el-button>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import interact from 'interactjs'
import screenFull from 'screenfull'

export default {
  name: 'dialogDrag',
  data() {
    return {
      dialogVisible: false,
      isFullscreen:true,
      position:{
        x:0,
        y:0
      }
    }
  },

  methods: {
    begin() {
      this.dialogVisible = true
      this.move()
    },
    handleFull(){
      let dom = document.querySelector('.el-dialog')
      if (screenFull.isFullscreen){
        screenFull.toggle();
        this.isFullscreen = true
      }
      if (screenFull.isEnabled) {
        screenFull.request(dom);
        this.isFullscreen = false
      }
    },
    move() {
      let dom = document.querySelector('.el-dialog')
      // const position = { x: 0, y: 0 }
      let that = this
      interact('.el-dialog__header').draggable({
        listeners: {
          start(event) {
          },
          move(event) {
            that.position.x += event.dx
            that.position.y += event.dy
            dom.style.transform =
              `translate(${that.position.x}px, ${that.position.y}px)`
          }
        }
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.box {
  .dialog {
    ::v-deep.el-dialog {
      width: 600px !important;

      .icon {
        position: absolute;
        top: 22px;
        right: 50px;
        cursor: pointer;
      }
    }

    ::v-deep.el-dialog__header {
      cursor: move;
    }
    //::v-deep.el-dialog__body{
    //  cursor:text;
    //}
    //::v-deep.el-dialog__footer{
    //  cursor:default;
    //}
  }
}

</style>
